<template>
  <detailbox :title="progressType == '2' ? '评审' : '审核'" @leftclick="close">
    <div slot="right" class="flex_item flex_between">
      <div></div>
      <div class="">
        <el-button type="primary" size="small" @click="submit()">提交</el-button>
        <el-button type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
      </div>
    </div>

    <el-row class="mt10">
      <el-col :span="16">
        <el-form inline="true" size="small" ref="form" :model="form">
          <el-row v-for="(item, index) in form.detailList" :key="index">
            <basic-container>
              <div class="main_title success_f flex_between">
                <b>
                  文件信息
                  <span v-if="form.detailList.length > 1">({{ index + 1 }})</span>
                </b>
                <div>
                  <el-form-item
                    label="审核结论："
                    style="margin-bottom: 0;"
                    size="small"
                    :prop="`detailList.${index}.check`"
                    :rules="{ required: true, message: '请选择审核结论', trigger: 'blur' }"
                  >
                    <el-select v-model="item.check" placeholder="请选择" style="width: 160px;" :class="{ red_f: item.check == '2' }">
                      <el-option label="通过" value="1"></el-option>
                      <el-option label="不通过" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="不通过理由："
                    v-if="item.check == '2'"
                    style="margin-bottom: 0;"
                    size="small"
                    :prop="`detailList.${index}.content`"
                    :rules="{ required: true, message: '请输入不通过理由', trigger: 'blur' }"
                  >
                    <el-input placeholder="请输入" v-model="item.content"></el-input>
                  </el-form-item>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="mb20">
                <span class="index_num success_bg">1</span>
                <b class="f14">文件属性</b>
              </div>

              <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" style="width: 100%;">
                <tr>
                  <td width="100">文件名称</td>
                  <td>{{ item.name }}</td>
                  <td width="100">文件编号</td>
                  <td>{{ item.fileNumber }}</td>
                  <td width="100">文件版本号</td>
                  <td>{{ item.versionNumber }}</td>
                </tr>
                <tr>
                  <td>文件控制状态</td>
                  <td>{{ item.controlStatus == '0' ? '受控' : '非受控' }}</td>
                  <td>内部/外来文件</td>
                  <td>{{ item.fileSource == '0' ? '内部文件' : '外来文件' }}</td>
                  <td>编制部门</td>
                  <td>{{ userInfo.deptName }}</td>
                </tr>
                <tr v-if="item.isUpgrade">
                  <td>文件生效日期</td>
                    <td>{{ item.beginTime|| '-' }}</td>
                  <td>现行/作废状态</td>
                  <td colspan="3">{{ item.invalidStatus >= 0 ? invalidStatusList[item.invalidStatus] : '-' }}</td>
                </tr>
              </table>

              <table class="owntable mb20 table1" border="0" cellspacing="0" cellpadding="1" style="width: 100%;" v-if="item.isUpgrade">
                <tr>
                  <td width="100">升版原因</td>
                  <td class="white_bg">{{ item.reason }}</td>
                </tr>
              </table>

              <table class="owntable mb20 table1" border="0" cellspacing="0" cellpadding="1" style="width: 100%;">
                <tr>
                  <td width="100">页码数量</td>
                  <td class="white_bg">{{ item.pageCount }}</td>
                </tr>
              </table>

              <file-globa :detail="item" type="4"></file-globa>
              <!-- <process-record-file :detail="item"></process-record-file> -->
            </basic-container>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="8">
        <check-process-record :guifanFilesProcessRecordList="guifanFilesProcessRecordList"  :shenheNum="shenheNum" :progressType="progressType"></check-process-record>
      </el-col>
    </el-row>

    <steps ref="steps" @close="success()" :checkItem="form"></steps>
    <showhistory ref="showhistory" :processStatus="processStatus" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
  </detailbox>
</template>

<script>
import { getdealDetail, deal } from '@/api/myapi/tixiwenjian';
export default {
  props: {
    progressType: '',
    groupNumber: ''
  },
  data() {
    return {
      processStatus: '',
      radio: '',
      nowdate: '',
      checked: false,
      showpreview: false,
      tableData: [],
      useTemp: false,
      shenheNum: 0,
      options: [],
      system: 'systemchengxufilesprocess',
      guifanFilesProcessRecordList: [],
      form: {
        detailList: []
      }
    };
  },
  mounted() {
    this.getdealDetail();
  },
  methods: {
    getdealDetail() {
      getdealDetail(
        {
          groupNumber: this.groupNumber
        },
        this.system
      ).then(({ data }) => {
        if (data.success) {
          this.form.detailList = [...data.data];
          this.processStatus = data.data[0].processStatus;
          this.form.detailList.forEach(item => {
            this.$set(item, 'check', '');
            this.$set(item, 'content', '');
          });
          this.guifanFilesProcessRecordList = data.data[0].chengxuFilesProcessRecordList;
          this.shenheNum = data.data[0].chengxuFilesProcessRecordList.length;
        }
      });
    },
    close() {
      this.$emit('close');
    },
    success() {
      this.$emit('close');
      this.$emit('success');
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let data = [];
          for (let i = 0; i < this.form.detailList.length; i++) {
            let item = this.form.detailList[i];
            data.push({
              id: item.id,
              checkStatus: item.check || '0',
              type: this.progressType,
              content: item.content
            });
          }
          deal(
            {
              processList: JSON.stringify(data)
            },
            this.system
          ).then(({ data }) => {
            if (data.success) {
              // this.$message.success('提交成功')
              this.openDialg('steps');
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.active {
  background-color: #e6f1fc !important;
  color: #126bc9 !important;
}

.red_f /deep/ .el-input__inner {
  color: #ff0000;
}
</style>
